<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 100%;
				height: 100%;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<!-- 
			设计一个含有一个表单的页面，
			并且在表单上放入一个文本框。
			编写程序，当鼠标在页面上移动时，
			鼠标的坐标显示在这个文本框中。
		 -->
		<div class="box">
			<input type="text" id="input" value="x=0,y=0"/>
		</div>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 先写一个在body或者box上面移动触发事件
			// 然后用event.clientX和Y,获取到了鼠标坐标
			// 然后打印输出到input的val里头
				$("html").mousemove(function(event){
					var left = event.clientX;
					var top = event.clientY;
					console.log(left);
					console.log(top);
					
					$("#input").val("x="+left+",y="+top);
				});
			
			
		</script>
	</body>
</html>
